<template>
  <order-sample-form
    ref="form"
    :title="title"
    :visible="visible"
    :form.sync="form"
    :query="query"
    :form-config-list="formConfigList"
    :xs-col="xsCol"
    :sm-col="smCol"
    :md-col="mdCol"
    :lg-col="lgCol"
    :xl-col="xlCol"
    :label-width="config.formConfig && config.formConfig.labelWidth ? config.formConfig.labelWidth : ''"
    :form-item-style="config.formItemStyle"
    :is-new-record="true"
    @value-change="handleValueChange"
    @update-field="handleUpdateField"
    @change-form="handleChangeForm"
    @close="handleClose"
  >
    <template slot="footer">
      <el-button type="primary" @click="handleSave">保存</el-button>
    </template>
  </order-sample-form>
</template>

<script>
  import OrderSampleForm from './Form';
  import {generateNewForm, getServerDataSource} from "../utils/form";

  export default {
    name: "App",
    components: {
      OrderSampleForm
    },
    props: {
      title: {
        type: String,
      },
      visible: {
        type: Boolean,
        default: true
      },
      xsCol: {
        default () {
          return {span: 24};
        }
      },
      smCol: {
        default () {
          return {span: 12};
        }
      },
      mdCol: {
        default () {
          return {span: 8};
        }
      },
      lgCol: {
        default () {
          return {span: 6};
        }
      },
      xlCol: {
        default () {
          return {span: 6};
        }
      },
    },
    data () {
      // let query = this.$route.query;
      let query = {materialTypeId: 17};
      this.materialTypeId = query.materialTypeId || null;
      const formFields = [
          {
            "type": "hidden",
            "field": "materialTypeId",
            "value": this.materialTypeId
          },
          {
            "box": "物料信息",
            "type": "input",
            "title": "编码",
            "field": "code",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入编码",
              "clearable": true
            },
            "validate":[
              { "required": true, "message": "请输入编码", "trigger": ["blur", "change"] }
            ]
          },
          {
            "box": "物料信息",
            "type": "input",
            "title": "名称",
            "field": "name",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入名称",
              "clearable": true
            },
            "validate":[
              { "required": true, "message": "请输入名称", "trigger": ["blur", "change"] }
            ]
          },
          {
            "box": "物料信息",
            "type": "input",
            "title": "型号",
            "field": "model",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入型号",
              "clearable": true
            },
            "validate":[
              { "required": false, "message": "请输入型号", "trigger": ["blur", "change"] }
            ]
          },
          {
            "box": "物料信息",
            "type": "input",
            "title": "规格",
            "field": "specs",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入规格",
              "clearable": true
            },
            "validate":[
              { "required": false, "message": "请输入规格", "trigger": ["blur", "change"] }
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "select",
            "title": "计算方式",
            "field": "calMethod",
            "value": "",
            "props": {
              "valueKey": "value",
              "filterable": true,
              "clearable": true
            },
            "extra": {
              "labelKey": "text"
            },
            "validate":[
              {"required": false, "message": "请选择计算方式", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15 || query.materialTypeId == 17) {return true;} return false;",
            "box": "物料信息",
            "type": "select",
            "title": "材质/成分",
            "field": "elementId",
            "value": "",
            "props": {
              "valueKey": "value",
              "filterable": true,
              "clearable": true
            },
            "extra": {
              "labelKey": "text"
            },
            "validate":[
              {"required": true, "message": "请选择材质/成分", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "幅宽(CM)",
            "field": "doorWidth",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入幅宽(CM)",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入幅宽(CM)", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "针距",
            "field": "needleDistance",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入针距",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入针距", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 16) {return true;} return false;",
            "box": "物料信息",
            "type": "select",
            "title": "品牌",
            "field": "brandId",
            "value": "",
            "props": {
              "valueKey": "value",
              "filterable": true,
              "clearable": true
            },
            "extra": {
              "labelKey": "text"
            },
            "validate":[
              {"required": false, "message": "请选择品牌", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 16 || query.materialTypeId == 17) {return true;} return false;",
            "box": "物料信息",
            "type": "treeSelect",
            "title":"物料分类",
            "field":"dictItemIdSubClass",
            "value": null,
            "props": {
              "data": [],
              "nodeKey": "id",
              "defaultExpandAll": true,
              "expandOnClickNode": false,
              "highlightCurrent": true,
              "showCheckbox": false,
              "props": {
                "label": "name",
                "children": "childs"
              }
            },
            // "extra": {
            //   "apiList": {
            //       "list": {
            //           "url": "/basMaterialClass/basMaterialClassTree",
            //           "query": {
            //               "type": this.materialTypeId
            //           },
            //       }
            //   }
            // },
            "validate":[
              { "required": true, "message": "请选择物料分类", "trigger": ["blur", "change"] }
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 17) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "D数",
            "field": "dunm",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入D数",
              "clearable": true
            },
            "validate":[
              { "required": false, "message": "请输入D数", "trigger": ["blur", "change"] }
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 17) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "股数",
            "field": "stockNum",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入股数",
              "clearable": true
            },
            "validate":[
              { "required": false, "message": "请输入股数", "trigger": ["blur", "change"] }
            ]
          },
          {
            "box": "物料信息",
            "type": "treeSelect",
            "title": "适用机型",
            "field": "fitMachineTypeIds",
            "value": "",
            "props": {
              "data": [],
              "nodeKey": "id",
              "defaultExpandAll": true,
              "expandOnClickNode": false,
              "highlightCurrent": true,
              "showCheckbox": true,
              "props": {
                "label": "name",
                "children": "childs"
              }
            },
            "validate":[
              {"required": false, "message": "请选择适用机型", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 17) {return true;} return false;",
            "box": "物料信息",
            "type": "select",
            "title": "特性分类",
            "field": "rawMaterialFeatureClassId",
            "value": "",
            "props": {
              "valueKey": "value",
              "filterable": true,
              "clearable": true
            },
            "extra": {
              "labelKey": "text"
            },
            "validate":[
              {"required": false, "message": "请选择特性分类", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 17) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "特性",
            "field": "feature",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入特性",
              "clearable": true
            },
            "validate":[
              { "required": false, "message": "请输入特性", "trigger": ["blur", "change"] }
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 17) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "千米克重",
            "field": "realKmgWeight",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入千米克重",
              "clearable": true
            },
            "validate":[
              { "required": false, "message": "请输入千米克重", "trigger": ["blur", "change"] }
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 17) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "颜色",
            "field": "color",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入颜色",
              "clearable": true
            },
            "validate":[
              { "required": false, "message": "请输入颜色", "trigger": ["blur", "change"] }
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 17) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "牵伸比",
            "field": "stretchRatio",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入牵伸比",
              "clearable": true
            },
            "validate":[
              { "required": false, "message": "请输入牵伸比", "trigger": ["blur", "change"] }
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 17) {return true;} return false;",
            "box": "物料信息",
            "type": "select",
            "title": "捻向",
            "field": "twistDirId",
            "value": "",
            "props": {
              "valueKey": "value",
              "filterable": true,
              "clearable": true
            },
            "extra": {
              "labelKey": "text"
            },
            "validate":[
              {"required": false, "message": "请选择捻向", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "坯布克重",
            "field": "mgWeightBlank",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入坯布克重",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入坯布克重", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "成品克重",
            "field": "mgWeightProduct",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入成品克重",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入成品克重", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "花高(CM)",
            "field": "flowerHeight",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入花高(CM)",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入花高(CM)", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "花宽(CM)",
            "field": "flowerWidth",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入花宽(CM)",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入花宽(CM)", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "机器幅宽(英寸)",
            "field": "devDoorWidth",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入机器幅宽(英寸)",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入机器幅宽(英寸)", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "手感",
            "field": "handFeeling",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入手感",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入手感", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "弹性",
            "field": "spring",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入弹性",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入弹性", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "梳栉",
            "field": "knotNum",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入梳栉",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入梳栉", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "亮度",
            "field": "brightness",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入亮度",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入亮度", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "密度",
            "field": "density",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入密度",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入密度", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "工艺",
            "field": "craft",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入工艺",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入工艺", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "织造损耗(%)",
            "field": "weavingLoss",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入织造损耗",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入织造损耗", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "成品损耗(%)",
            "field": "productLoss",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入成品损耗",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入成品损耗", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "伸缩率(%)",
            "field": "expansionRatio",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入伸缩率",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入伸缩率", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15 || query.materialTypeId == 17) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "产品用途",
            "field": "productPurpose",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入产品用途",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入产品用途", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 15 || query.materialTypeId == 17) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "市场俗称",
            "field": "markName",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入市场俗称",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入市场俗称", "trigger": ["blur", "change"]}
            ]
          },
          {
            "box": "物料信息",
            "type": "input",
            "title": "安全库存(KG)",
            "field": "minNum",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入安全库存",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入安全库存", "trigger": ["blur", "change"]}
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 16) {return true;} return false;",
            "box": "物料信息",
            "type": "input",
            "title": "等级",
            "field": "grade",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入等级",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入等级", "trigger": ["blur", "change"]}
            ]
          },
          {
            "box": "物料信息",
            "type": "input",
            "title": "保质期(天)",
            "field": "expDays",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入保质期(天)",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入保质期(天)", "trigger": ["blur", "change"]}
            ]
          },
          {
            "box": "物料信息",
            "type": "input",
            "title": "标准成本(元/KG)",
            "field": "standardCosts",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入标准成本",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入标准成本", "trigger": ["blur", "change"]}
            ]
          },
          {
            "box": "物料信息",
            "type": "input",
            "title": "备注",
            "col": {
              "lineFeed": null,
              "times": 1
            },
            "field": "remark",
            "value": "",
            "props": {
              "type": "text",
              "placeholder": "请输入备注",
              "clearable": true
            },
            "validate":[
              {"required": false, "message": "请输入备注", "trigger": ["blur", "change"]}
            ]
          },
          {
            "box": "存储信息",
            "type": "select",
            "title": "单位组",
            "field": "dictUnitGroup",
            "value": null,
            "options": [
            ],
            "props": {
              "valueKey": "value",
              "filterable": true,
              "clearable": true
            },
            "extra": {
              "labelKey": "text",
              // "relateFields": [
              //   {
              //     "field": "mainUnitId"
              //   },
              //   {
              //     "field": "subUnitId"
              //   },
              // ]
            },
            "validate":[
              { "required": true, "message": "请选择单位组", "trigger": ["blur", "change"] }
            ]
          },
          {
            "box": "存储信息",
            "type": "select",
            "title": "主计量单位",
            "field": "mainUnitId",
            "value": null,
            "options": [
            ],
            "props": {
              "valueKey": "value",
              "filterable": true,
              "clearable": true
            },
            "extra": {
              "labelKey": "text",
              "remote": {
                "enable": true,
                "url": "/basMaterial/mainUnitIdList",
                "watchFields": ["dictUnitGroup"],
                "query": {
                  "id": "$f_dictUnitGroup",
                  "pageIndex": 1,
                  "pageSize": 100,
                },
                "resFunction": "return res.data.list",
                "transmitList": {
                  "enable": true,
                  "field": "unitList"
                }
              },
            },
            "validate":[
              { "required": true, "message": "请选择主计量单位", "trigger": ["blur", "change"] }
            ]
          },
          {
            "box": "存储信息",
            "type": "select",
            "title": "从计量单位",
            "field": "subUnitId",
            "value": null,
            "options": [
            ],
            "props": {
              "valueKey": "value",
              "filterable": true,
              "clearable": true
            },
            "extra": {
              "labelKey": "text",
              "remote": {
                "enable": true,
                "url": "/basMaterial/subUnitIdList",
                "watchFields": ["dictUnitGroup"],
                "query": {
                  "id": "$f_dictUnitGroup",
                  "pageIndex": 1,
                  "pageSize": 100,
                },
                "resFunction": "return res.data.list"
              },
            },
            "validate":[
              { "required": true, "message": "请选择从计量单位", "trigger": ["blur", "change"] }
            ]
          },
          {
            "visibleFunction": "if (query.materialTypeId == 16) {return true;} return false;",
            "box": "存储信息",
            "formType": "unitConvert",
            "title": "单位转换",
            "col": {
              "lineFeed": true,
              "times": 24
            }
          }
      ]

      return {
        initDataItems: [],
        bindDataItem: {},
        materialTypeId: this.materialTypeId,
        form: {

        },
        formConfigList: [],
        config: {
          "formConfig": {
            "labelWidth": "120px"
          },
          formItemStyle: {
          },
          form: [
            ...formFields,
            ...[
              {
                "box": "其他信息",
                "type":"radio",
                "title":"状态",
                "field":"status",
                "value":"10",
                "options": [
                ],
                "extra": {
                  "labelKey": "text",
                  "valueKey": "value"
                }
              },
            ]
          ],
          "apiList": {
            // "dataSourceApi": {
            //   "url": "/basMaterial/basMaterialAddInit",
            //   "query": {
            //     "id": "$q_id",
            //     "materialType": this.materialTypeId
            //   }
            // }
          }
        },
        query: {materialTypeId: 17}
      };
    },
    computed: {
      dataSourceApi () {
        return this.config && this.config.apiList && this.config.apiList.dataSourceApi ? this.config.apiList.dataSourceApi : null;
      },
      preViewFunction () {
        return this.config && this.config.preViewFunction ? this.config.preViewFunction : '';
      },
    },
    watch: {
      query: {
        handler (val) {
          // console.log(val);
        },
        immediate: true
      }
    },
    mounted() {
      this.getInit();
      console.log(this)
      this.$bus.$on("selectChange", this.handleValueChange)
    },
    methods: {
      async getInit() {
        this.formConfigList = await this.getServerDataSource(this.config.form);
        this.form = this.generateNewForm(this.formConfigList);
      },
      handleChangeForm ({formConfigList}) {
        let initForm = this.generateNewForm(formConfigList);
        this.form = Object.assign(initForm, this.form);
        this.$refs.form.$refs.form.clearValidate();
      },
      generateNewForm (formList) {
        return generateNewForm(formList, this.query, this.form);
      },
      getServerDataSource (formList) {
        return new Promise( (resolve, reject) => {
          getServerDataSource(formList, this.dataSourceApi, this.query, this.preViewFunction, '')
            .then((res) => {
              // console.log(res)
              resolve(res.formList);
              return res.formList;
            })
            .catch(err => {
              console.log(err);
              resolve(formList);
              return formList;
            });
        });
      },
      handleClose () {
        this.$emit('update:visible', false);
      },
      handleValueChange (obj) {
        console.log(obj, 959)
        obj.field && (this.form[obj.field] = obj.value);
      },
      handleUpdateField (fieldObj) {
        let form = this.form;
        if (form) {
          for (let i in form) {
            if (fieldObj[i] !== undefined) {
              form[i] = fieldObj[i];
            }
          }
        }
      },
      handleSave () {
        
      }
    }
  };
</script>